<template>
	<view>
		<view>
			<fui-form ref="form">
				<view style="padding:20rpx">约单描述*（尽可能详细）</view>
				<fui-textarea size="26" v-model="formData.ReservationOrderMemo"
					placeholder="请描述一下您的约单...如您的特长、才艺、接单范围、期待合作的通告等。（不能包含任何联系方式，照片中不能有露点的照片，不能发布私房等，否则审核不通过，7个字以上）"></fui-textarea>
				<view style="padding:20rpx">上传图片/视频*（本人作品/本人照片/期待风格等）</view>
				<view style="padding:20rpx;">
					<fui-upload v-if="uploadPic" :sizeType='sizeType' :sourceType='sourceType' immediate
						:url="uploadUrl" ref="upload" width="200" height="200" @success="uploadSuccess" @error="error"
						@complete="uploadComplete" Right></fui-upload>
					<fui-upload-video v-if="uploadVideo" immediate :url="videoUpUrl" width="200" height="200"
						:fileList="videoUrls" ref="videoUpload" @success="success" @error="videoError"
						@complete="complete"></fui-upload-video>
				</view>
				<fui-form-item label="时间" labelSize="26">
					<fui-input size="26" v-model="formData.ReservationOrderTimes" :borderBottom="false" :padding="[0]"
						placeholder="请输入合作时间(选填)" textRight></fui-input>
				</fui-form-item>
				<fui-form-item label="地点" labelSize="26">
					<fui-input size="26" v-model="formData.ReservationOrderAdds" :borderBottom="false" :padding="[0]"
						placeholder="请输入合作地点(选填)" textRight></fui-input>
				</fui-form-item>
				<fui-form-item label="收费模式" labelSize="28" arrow>
					<fui-input size="26" :borderBottom="false" readonly placeholder="请选择" :padding="[10,10,10,10]"
						textRight v-model="formData.priceType['text']" @click="showPriceType"></fui-input>
				</fui-form-item>
				<fui-form-item label="收费金额" labelSize="28" label-width="210rpx" v-if="formData.priceType.value === 1">
					<view style="width:540rpx;float:right;">
						<view style="float:right;padding-left:15rpx">
							<text :style="{color:(formData.priceQujian?'#000':'#ccc')}">区间</text>
							<checkbox style="transform: scale(0.7,0.7);" v-model="formData.priceQujian"
								:checked="formData.priceQujian" @click="changePriceQujian(e)"></checkbox>
						</view>
						<view style="float:right;border-right:1rpx solid #000;padding-right:5rpx;display:flex">
							<view style="width:260rpx;padding-right:10rpx;display:flex;" v-if="formData.priceQujian">
								<view>
									<fui-input type="number" size="30" v-model="formData.startPrice"
										:borderBottom="false" :padding="[10,10,10,10]" placeholder="最小金额"
										textRight></fui-input>
								</view>
								<view>~</view>
								<view>
									<fui-input type="number" size="30" v-model="formData.endPrice" :borderBottom="false"
										:padding="[10,10,10,10]" placeholder="最大金额" textRight></fui-input>
								</view>
							</view>
							<view style="width:220rpx;padding-right:10rpx" v-else>
								<fui-input type="number" size="30" v-model="formData.price" :borderBottom="false"
									:padding="[10,10,10,10]" placeholder="请输入支付金额" textRight></fui-input>
							</view>
							<view style="padding:5rpx">元</view>
							<view style="width:90rpx"><fui-input :borderBottom="false" readonly size="30"
									:padding="[10,10,10,10]" placeholder="/单位" v-model="formData.unit.text"
									@click="showUnit"></fui-input></view>
						</view>
					</view>
				</fui-form-item>
				<fui-form-item label="面向地区" labelSize="26" arrow>
					<view style="float:right;width:200rpx">
						<fui-input size="26" :borderBottom="false" readonly placeholder="请选择面向地区"
							:paddisssssng="[10,10,10,10]" textRight v-model="formData.city"
							@click="showCity"></fui-input>
					</view>
				</fui-form-item>
				<view style="background-color:#f0f0f0;padding:30rpx;">
					选择接单通告标签
				</view>
				<view style="background-color:#f0f0f0;padding:20rpx;padding-top:0rpx">
					<fui-data-tag multiple mark max="3" :options="OrderLabel" @change="selectLabel"></fui-data-tag>
				</view>
			</fui-form>
		</view>
		<view style="height:100rpx;"></view>
		<!-- <view class="saveBtns">
			<fui-button background="#FFDD00" width="95%" height="70rpx" color="#000" class="saveBtn" @click="submitOrder">提交发布</fui-button>
		</view> -->

		<view class="saveBtns">
			<view style="width: 90vw; display: inline-block;">
				<fui-button background="#FFDD00" width="100%" height="70rpx" color="#000" class="saveBtn"
					@click="submitOrder">提交发布</fui-button>
			</view>
		</view>
		<!-- <fui-picker linkage :options="roles" :show="roleShow" @change="changeRole" @cancel="pickerCancel('role')"></fui-picker> -->
		<fui-picker linkage :layer="2" :options="cityOptions" :show="cityShow" @change="changeCity"
			@cancel="pickerCancel('city')"></fui-picker>
		<fui-picker linkage :options="payPrices" :show="priceShow" @change="changePrice"
			@cancel="pickerCancel('price')"></fui-picker>
		<fui-picker linkage :options="units" :show="unitsShow" @change="changeUnit"
			@cancel="pickerCancel('unit')"></fui-picker>
		<fui-toast ref="toast"></fui-toast>
	</view>
</template>

<script>
	import moment from "@/script/moment.js";
	import cityData from "@/script/city.js";
	//校验规则
	const rules = [];
	export default {
		data() {
			return {
				sizeType: ['compressed'],
				labelid: 0,
				uploadPic: true,
				uploadVideo: true,
				uploadUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=image',
				videoUpUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=video',
				uploadStatus: {},
				minData: moment().format("YYYY/MM/DD"),
				formData: {
					formOrder: 'reservation',
					ClassID: 0,
					ClassName: '',
					publicRole: {
						value: 0,
						text: '请选择要面向的身份'
					},
					cityJson: {},
					city: '',
					cityCode: [],
					priceType: {},
					price: '',
					startPrice: '',
					endPrice: '',
					unit: '',
					ReservationOrderMemo: '',
					ReservationOrderTimes: '',
					ReservationOrderAdds: '',
					uploadFiles: [],
					uploadVideos: [],
					OrderLabels: [],
					priceQujian: true
				},
				// roleShow: false,
				// roles: [],
				sexShow: false,
				sexs: [{
						value: -1,
						text: '不限'
					},
					{
						value: 0,
						text: '女'
					},
					{
						value: 1,
						text: '男'
					}
				],
				units: [{
						value: 1,
						text: '/小时'
					},
					{
						value: 2,
						text: '/天'
					},
					{
						value: 3,
						text: '/单'
					},
					{
						value: 4,
						text: '/件'
					},
					{
						value: 5,
						text: '/次'
					},
				],
				unitsShow: false,
				priceShow: false,
				payPrices: [{
						value: 0,
						text: '接受互免'
					},
					{
						value: 3,
						text: '接受无费置换'
					},
					{
						value: 2,
						text: '我要收费-费用协商'
					},
					{
						value: 1,
						text: '我要收费-手动输入'
					},
				],
				cityShow: false,
				cityOptions: [],
				birthdayShow: false,
				OrderLabel: [],
				//上传接口地址
				videoUpUrl: 'https://api.meimo.comdns.cn/common/Upload/upload?file=uniapp&type=video',
				//上传状态，用于保存或其他操作时做判断
				status: '',
				//上传的视频地址列表
				videoUrls: [],
			};
		},
		onLoad(options) {
			// console.log('options', options);
			this.labelid = options.oid;
			this.formData.ClassID = options.oid;
			this.cityOptions = cityData.cityData;
			this.getFormData();
		},
		methods: {
			//上传成功时触发
			success(e) {
				// console.log('success', e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				this.status = e.status
				if (res.fileName) {
					this.uploadPic = false;
					//处理结果返回给组件 
					//res.data.url为上传成功后返回的视频地址
					//e.index为视频索引值
					this.$refs.videoUpload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			videoError(e) {
				this.status = e.status
			},
			//选择视频或上传完成时触发
			complete(e) {

				// console.log('complete', e)
				if (e.urls.length == 0) {
					this.uploadPic = true;
				}
				this.status = e.status
				this.videoUrls = e.urls
				this.formData.uploadVideos = e.urls
				if (this.status === 'success' && e.action === 'upload') {
					// this.fui.toast('上传完成！')
					//已上传完成的视频列表 this.urls
					// console.log(this.videoUrls)



					// this.$httpost('/UserAction/saveOrderVideo', {
					// 	uploadUrls: this.videoUrls
					// }).then(res => {
					// 	if (res.code == 200) {
					// 	}
					// });
				}
			},
			//上传成功时触发
			uploadSuccess(e) {
				// console.log('uploadSuccess', e)
				//e.res 为服务器返回数据
				//上传成功回调，处理服务器返回数据【此处根据实际返回数据进行处理】
				let res = JSON.parse(e.res.data.replace(/\ufeff/g, "") || "{}")
				// console.log('res', res)
				this.uploadStatus = e.status
				if (res.fileName) {
					//处理结果返回给组件 
					this.uploadVideo = false;
					//res.data.url为上传成功后返回的图片地址
					//e.index为图片索引值
					this.$refs.upload.result(this.$baseUrl + res.fileName, e.index)
				}
			},
			//上传失败时触发
			uploadError(e) {
				this.uploadStatus = e.status
			},
			//选择图片或上传完成时触发
			uploadComplete(e) {

				// console.log('uploadStatus', e)

				if (e.urls.length == 0) {
					this.uploadVideo = true;
				}
				this.uploadStatus = e.status
				this.formData.uploadFiles = e.urls
				if (this.uploadStatus === 'success' && e.action === 'upload') {
					// let options = {}
					//提示信息
					// options.text = '上传完成！';
					// this.fui.toast('上传完成！')
					// this.$refs.toast.show(options)
					//已上传完成的图片列表 this.urls
					// console.log('uploadUrls', this.formData.uploadFiles)
				}
			},
			pickerCancel(type) {
				// if (type == 'role') {this.roleShow = false}
				if (type == 'unit') {
					this.unitsShow = false
				}
				// if (type == 'birthday') {this.birthdayShow = false}
				if (type == 'price') {
					this.priceShow = false
				}
				if (type == 'city') {
					this.cityShow = false
				}
			},
			changePriceQujian(e) {
				this.formData.priceQujian = !this.formData.priceQujian
				// console.log(this.formData.priceQujian)
			},
			showUnit() {
				this.unitsShow = true
			},
			changeUnit(e) {
				this.formData.unit = e
				this.unitsShow = false
			},
			showPriceType() {
				// console.log('this.priceShow = true', this.priceShow)
				// console.log('执行1~~~~~~')
				this.priceShow = true
			},
			changePrice(e) {
				// console.log(e)
				this.formData.priceType = e
				this.priceShow = false
			},
			showSex() {
				this.sexShow = true
			},
			changeSex(e) {
				// console.log(e)
				this.formData.sex = e
				this.sexShow = false
			},
			showBirthday() {
				this.birthdayShow = true
			},
			changeBirthday(e) {
				// console.log(e)
				this.formData.birthday = e.result
				this.birthdayShow = false
			},
			// showRole() {
			// 	this.roleShow = true
			// },
			// changeRole(e) {
			// 	// console.log(e)
			// 	this.formData.publicRole = e
			// 	this.roleShow = false
			// },
			showCity() {
				// console.log('执行2~~~~~~~~')
				// console.log('this.cityShow = true', this.cityShow)
				this.cityShow = true;
			},
			changeCity(e) {
				// console.log(e)
				this.formData.cityJson = e
				this.formData.city = e.result
				this.formData.cityCode = e.value
				this.cityShow = false
			},
			getFormData() {
				this.$httpost('/Form/ReservationOrder', {
					'labelid': this.labelid
				}).then(res => {
					// console.log(res)
					if (res.code == 200) {
						this.formData.ClassName = res.data.publicType.LabelName
						this.OrderLabel = res.data.orderLabel

						wx.setNavigationBarTitle({
							title: '约单' + res.data.publicType.LabelName
						});
					}

				})
			},
			selectLabel(e) {
				if (e.detail.value.length < 4) {
					this.formData.OrderLabels = e.detail.value
				} else {
					uni.showToast({
						title: '最多只能选择3个通告标签',
						icon: 'none'
					});
					return false;
				}

				// console.log(e.detail.value, e.detail.item)
			},
			submitOrder() {
				this.$refs.form.validator(this.formData, rules).then(result => {
					if (result.isPassed) {
						if (this.formData.ReservationOrderMemo == '') {
							this.$common.showToast("请填写约单描述！");
							return false;
						}
						if (this.formData.ReservationOrderMemo.length < 7) {
							this.$common.showToast("约单描述不得少于7字！");
							return false;
						}

						if (this.formData.uploadFiles.length == 0) {
							if (this.formData.uploadVideos.length == 0) {
								this.$common.showToast("图片或视频至少要上传一种！");
								return false;
							}
						}
						if (JSON.stringify(this.formData.priceType) === '{}') {
							this.$common.showToast("请选择费用模式！");
							return false;
						} else {
							if (this.formData.priceType.value == 1) {
								if (this.formData.priceQujian) {
									if (this.formData.startPrice == "" || this.formData.endPrice == "") {
										this.$common.showToast("请填写费用金额！");
										return false;
									}
								} else {
									if (this.formData.price == "") {
										this.$common.showToast("请填写费用金额！");
										return false;
									}
								}

								if (JSON.stringify(this.formData.unit) === '{}') {
									this.$common.showToast("请选择费用单位！");
									return false;
								}
							}
						}
						if (this.formData.city == "") {
							this.$common.showToast("请选择要面向的地区！");
							return false;
						}

						if (this.formData.OrderLabels.length == 0) {
							this.$common.showToast("请选择接单通告！");
							return false;
						}

						// console.log('this.formData', this.formData)


						this.$httpost('/Form/submitOrder', this.formData).then(res => {
							// console.log('submitOrder:', res);
							this.$common.showToast("约单发布成功，请等待审核");
							setTimeout(() => {

								// this.$common.goNavPage("/myPages/pages/myYuedan");
								// this.$common.goNavPage("/myPages/pages/submitResults");
								this.$common.goNavPage(
									`/myPages/pages/submitResults?isClass=1&titleName=${this.formData.ClassName? JSON.stringify(this.formData.ClassName): ''}`
								);
							}, 500)
						})
					}
				}).catch(err => {
					// console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss">
	.saveBtns {
		position: fixed;
		z-index: 100;
		bottom: 20rpx;
		left: 0%;
		right: 0%;
		text-align: center;
	}

	.saveBtn {
		margin: auto;
	}
</style>